<?php
    $con=mysqli_connect("localhost","root","","hhuy");
    // Check connection
    if (mysqli_connect_errno())
    {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
        die();
    }
    
    $d = mysqli_query($con,"SELECT * FROM english_dialogue_answer WHERE dialogue_id = 1");
    
    
    mysqli_close($con);
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>English - March 17</title>
        <script src="/js/jquery/jquery-2.1.0.js"></script>
        <script src="/js/jquery/jquery.blockUI.js"></script>
        
    </head>
<style type="text/css">
<!--
    input[type=text] {
        width: 90%;
    }
    table{
        width: 100%;
    }
-->
</style>
    <body>
        <h3><?php echo "Input your answers"; ?></h3>
        <div id="updateDiv">
            <table>
                <?php while($d_r = mysqli_fetch_array($d))
                        echo '<tr><td> '.$d_r['position'].'/ <input p="'.$d_r['position'].'" type="text" value="'.$d_r['answer'].'" oninput="javascript:ajax_input_value(this)" onchange="javascript:ajax_input_value(this)" /> </td></tr>';                    
                ?>
            </table>
        </div>
<script type="text/javascript">
<!--
    function ajax_input_value(obj)
    {
        $.ajax({
            "url" : 'function/ajax_input_value.php?d_id=1&v='+obj.value+'&p=' + obj.getAttribute('p'),
            "dataType" : "json",
        }).done(function(data){
            console.log('ok');
        })
    }
    
-->
</script>
    </body>
</html>
